.aui-page__login {
    &::before,
    &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        content: "";
    }
    &::before {
        background-image: url(~@/assets/img/neiwangsaas/bg.png);
        background-size: cover;
    }
    &::after {
        background: linear-gradient(-45deg, #FFFFFF, rgba(0, 0, 0, 0), #FFFFFF, rgba(0, 0, 0, 0), #FFFFFF, rgba(0, 0, 0, 0));
        background-size: 400% 400%;
        // -webkit-animation: Gradient 25s ease infinite;
        // -moz-animation: Gradient 25s ease infinite;
        // animation: Gradient 25s ease infinite;
    }
    @-webkit-keyframes Gradient {
        0% {
            background-position: 0% 50%
        }
        50% {
            background-position: 100% 50%
        }
        100% {
            background-position: 0% 50%
        }
    }
    @-moz-keyframes Gradient {
        0% {
            background-position: 0% 50%
        }
        50% {
            background-position: 100% 50%
        }
        100% {
            background-position: 0% 50%
        }
    }
    @keyframes Gradient {
        0% {
            background-position: 0% 50%
        }
        50% {
            background-position: 100% 50%
        }
        100% {
            background-position: 0% 50%
        }
    }
    .aui-content {
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
        min-height: 70vh;
        padding: 0 20px;
        text-align: center;
        &__wrapper {
            height: 100vh;
            background-color: transparent;
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
    .login-header {
        padding: 20px;
        color: #fff;
        .login-brand {
            margin: 0 0 15px;
            font-size: 40px;
            font-weight: 400;
            letter-spacing: 2px;
            text-transform: uppercase;
        }
        .login-intro {
            padding: 0;
            margin: 0;
            list-style: none;
            >li {
                font-size: 16px;
                line-height: 1.5;
                color: rgba(255, 255, 255, .6);
                &+li {
                    margin-top: 5px;
                }
            }
        }
    }
    .login-body {
        padding: 0 70px 0 400px;
        border-radius: 5px;
        background-image: url(~@/assets/img/neiwangsaas/crowd.png);
        background-size: 100% 100%;
        height: 430px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .el-form-item--feedback {
            width: 260px;
        }
        .w-percent-100 {
            width: 100%;
        }
        .icon-svg {
            font-size: 18px;
        }
        .login-brand {
            position: absolute;
            left: 30px;
            top: 30px;
            color: #2F99F3;
            margin: 0;
        }
        .login-title {
            font-size: 16px;
            font-weight: 500;
            color: #444444;
            text-align: left;
            margin: 0 0 20px;
        }
        .el-input__prefix .el-input__icon {
            font-size: 16px;
        }
        .login-captcha {
            height: $--input-height;
            line-height: $--input-height -2px;
            >img {
                max-width: 100%;
                cursor: pointer;
            }
        }
        .login-shortcut {
            margin-bottom: 20px;
            &__title {
                position: relative;
                margin: 0 0 15px;
                font-weight: 400;
                &::before {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    left: 0;
                    z-index: 1;
                    content: "";
                    height: 1px;
                    margin-top: -.5px;
                    background-color: $--border-color-base;
                    overflow: hidden;
                }
                >span {
                    position: relative;
                    z-index: 2;
                    padding: 0 20px;
                    color: rgba(0, 0, 0, .3);
                    background-color: #fff;
                }
            }
            &__list {
                padding: 0;
                margin: 0;
                list-style: none;
                font-size: 0;
                >li {
                    display: inline-block;
                    vertical-align: middle;
                    margin: 0 10px;
                    font-size: 28px;
                }
            }
        }
        .login-guide {
            color: rgba(0, 0, 0, .3);
        }
    }
    .login-footer {
        position: absolute;
        bottom: 0;
        padding: 20px;
        color: rgba(141, 141, 141, 0.6);
        p {
            margin: 10px 0;
            color: #FFFFFF;
        }
        a {
            padding: 0 5px;
            color: #FFFFFF;
            &:focus,
            &:hover {
                color: #288eff;
            }
        }
    }
    // 右侧垂直风格
    &--right-vertical {
        .aui-content {
            flex-flow: row nowrap;
            justify-content: flex-start;
            align-items: stretch;
            padding: 0;
        }
        .login-header {
            flex: 1;
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            padding: 30px 120px;
            text-align: left;
        }
        .login-body {
            position: relative;
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
            padding: 120px 30px 150px;
            text-align: center;
            .login-guide {
                margin-top: 0;
            }
        }
        .login-footer {
            right: 0;
            color: $--color-text-regular;
            a {
                color: $--color-text-regular;
                &:focus,
                &:hover {
                    color: $--color-primary;
                }
            }
        }
    }
}

@media (max-width: 991px) {
    .aui-page__login {
        &--right-vertical {
            .login-header {
                padding: 30px;
            }
        }
    }
}

@media (max-width: 767px) {
    .aui-page__login {
        &--right-vertical {
            .login-header {
                .login-brand,
                .login-intro {
                    display: none;
                }
            }
        }
    }
}

@media (max-width: 575px) {
    .aui-page__login {
        .login-body,
        .login-footer {
            width: 100%;
        }
        .login-captcha {
            text-align: left;
            >img {
                width: 136px;
            }
        }
        &--right-vertical {
            .login-header {
                display: none;
            }
        }
    }
}